<template>
  <view class="clocked-in-page">
    <uni-page-header :show-left="false" title="打卡" />
    <view class="header">
      <view class="title">拍照打卡领青币</view>
      <view class="rule-close-wrap">
        <view class="rule-btn btn" @click="onRuleView">规则</view>
        <view class="close-btn btn" @click="onClockInClose">关闭</view>
      </view>
    </view>
    <!-- 打卡统计模块 -->
    <statistical-module />

    <!-- 打卡日历 -->
    <calendar @date:update="onDateUpdate" />

    <!-- 浏览青丝台账 -->
    <make-clock-in />

    <!-- 关闭打卡提示弹窗 -->
    <u-modal
      show-cancel-button
      :show="tipModal.show"
      :title="tipModal.title"
      :content="tipModal.content"
      @cancel="onModalCancel"
      @confirm="onModalConfirm"
    />

    <!-- 打卡规则弹窗 -->
    <u-popup
      :show="rulePopup.show"
      closeable
      :round="10"
      mode="center"
      :safe-area-inset-bottom="false"
      @close="rulePopup.show = false"
    >
      <view class="rule-wrap">
        <view class="title">打卡规则</view>
        <view class="content">{{ clockInRuleData.rule_desc }}</view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import StatisticalModule from './clockedIn/StatisticalModule.vue'
import MakeClockIn from './clockedIn/MakeClockIn.vue'
import Calendar from './clockedIn/Calendar.vue'
import {
  wx_clockin_rules_close,
  wx_customer_clockin_data
} from '../../../api/index.js'
import {
  mapState,
  mapActions
} from 'vuex'
export default {
  name: 'ClockedIn',
  components: {
    StatisticalModule,
    Calendar,
    MakeClockIn
  },
  data() {
    return {
      tipModal: {
        show: false,
        title: '温馨提示',
        content: '确定要关闭打卡吗？'
      },
      rulePopup: {
        show: false
      },
      date: ''
    }
  },
  computed: {
    ...mapState(['clockInRuleData'])
  },
  mounted() {
    // this.initData()
    // if (this.clockInRuleData.is_enable) {
    //   this.initData()
    // }

    // uni.$on('clockin-setting-update', () => {
    //   console.log('打卡数据页面-监听打卡配置修改')
    //   this.initData()
    // })
    uni.$on('save-update-clockin', () => {
      console.log('监听到了打卡/补卡操作')
      this.initData()
    })

    uni.$on('get-chance-success', () => {
      console.log('监听到补卡次数获取成功')
      this.initData()
    })
  },
  methods: {
    ...mapActions(['setClockInDetail']),
    async initData() {
      console.log('获取打卡详情')
      const clockInData = await wx_customer_clockin_data({
        clockin_m: this.date
      })
      this.setClockInDetail(clockInData)
    },

    onDateUpdate(value) {
      this.date = value
      this.initData()
    },

    onRuleView() {
      this.rulePopup.show = true
    },

    onClockInClose() {
      this.tipModal.show = true
    },

    onModalCancel() {
      this.tipModal.show = false
    },

    // 关闭打卡
    async onModalConfirm() {
      await wx_clockin_rules_close({
        ruleid: this.clockInRuleData.id
      })
      this.onModalCancel()
      this.$emit('clockIn:close')
    }
  }
}
</script>

<style lang="scss" scoped>
	.clocked-in-page {
		padding-bottom: 30rpx;

		.header {
			height: 102rpx;
			padding: 30rpx 46rpx;
			@include flex-between;
			background-color: #FFF;
			box-shadow: 0 2rpx 6rpx 0 rgba(0, 0, 0, 0.05);

			.title {
				font-weight: bolder;
        font-size: 28rpx;
			}

			.rule-close-wrap {
				@include flex-column-center;
				gap: 26rpx;

				.btn {
					font-size: 24rpx;
					border-radius: 4rpx;
					padding: 5rpx 8rpx;
				}

				.rule-btn {
					background-color: #B8E1FF;
					color: #3078AC;
				}

				.close-btn {
					background-color: #FFB8B8;
					color: #AC3030;
				}
			}
		}

		.rule-wrap {
			width: 70vw;
			padding-bottom: 20rpx;

			.title {
				height: 100rpx;
				font-size: 30rpx;
				@include flex-center;
			}

			.content {
				height: 30vh;
				padding: 0 20rpx;
				font-size: 30rpx;
				overflow: hidden;
				overflow-y: auto;
			}
		}
	}
</style>
